import React from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import { usedown } from '../../hooks/usedown'
import {getcodeapi} from '../../api/zc'
import {useNavigate} from 'react-router-dom'
function index() {
  const nav=useNavigate()
  const [form] = Form.useForm()
  const { count, isdown, start } = usedown()
  const sendcode = async () => {
    try {
      const result = await form.validateFields(['tel'])
      console.log(result)
      const { data: res } = await getcodeapi(result.tel)
      console.log(res)
      form.setFieldValue('telcode', res.data.telcode)
      
      start()
    } catch {
      Toast.show('校验不通过')
    }
  }
  const tz=()=>{
    nav('/home')
  }
  return (
    <div>
      <div>
        <h2>Hi,欢迎使用</h2>
        <span>未注册过得手机号将自动创建账号</span>
      </div>

      <Form form={form} layout='horizontal' mode='card'
        footer={
          <Button block color='warning' size='large' shape='rounded' onClick={tz}>
            登录
          </Button>
        }
      >

        <Form.Item label='手机号' name='tel'
          rules={[
            { required: true, message: '请输入正确手机号' },
            // 实现手机号的非空验证
            {
              pattern: /^1[3-9]\d{9}$/,
              message: '请输入11位手机号'
              // (2)实现手机号的正则校验（手机号正则）
            }

          ]}

        >
          <Input placeholder='请输入' />
        </Form.Item>

        <Form.Item label='短信验证码' disabled={isdown}  name='telcode' 
          extra={<Button color='warning' shape='rounded' onClick={sendcode}>{isdown ? `${count}s后重新发送` : '获取验证码'}</Button>}>
           
          
          <Input placeholder='请输入' />
        </Form.Item>
      </Form>
    </div>
  )
}

export default index


